<template>
    <el-container style="height: 100%;width: 100%;">
        <el-aside width="359px" height="100%" class="left-aside">
            <div class="wrap">
                <div class="usr-info">
                    <el-avatar class="usr-avatar" :size="60" :src="circleUrl" />
                    <div class="usr-name">张一东</div>
                </div>
                <ul class="option-li">
                    <li>
                        <div class="option-li-item">
                            <div class="option-content option-select">所有待办</div>
                        </div>
                    </li>
                    <li>
                        <div class="option-li-item">
                            <div class="option-content">个人待办</div>
                        </div>
                    </li>
                    <li>
                        <div class="option-li-item">
                            <div class="option-content">工作待办</div>
                        </div>
                    </li>
                </ul>
            </div>
        </el-aside>
        <el-container>
            <!-- <div class="header"></div> -->
            <el-main direction="horizontal" style="z-index: 5;">
                <div class="main-center">
                    <DateCom />
                    <MainCom />
                </div>
                <div class="right-aside">
                    <div class="search"></div>
                    <div class="statistics">
                        <Statistics />
                    </div>
                    <div class="empty"></div>
                </div>
            </el-main>
            <!-- <el-footer hidden>Footer</el-footer> -->
        </el-container>
    </el-container>
</template>
<script setup>
import DateCom from '../components/Date/index.vue'
import MainCom from '../components/Main.vue'
import Statistics from '../components/Statistics.vue'
</script>

<style scoped lang="scss">
.left-aside {
    background-color: white;
}

.el-main {
    display: flex;
    flex-direction: row;
    // flex-wrap: wrap;
    overflow: hidden;
    .main-center {
        height: 100%;
        display: flex;
        flex-direction: column;
        flex: 1 1 900px;
        min-height: 720px;
    }

    .right-aside {
        height: 100%;
        min-height: 720px;
        // min-height: 0;
        max-width: 932px;
        min-width: 348px;
        // background-color: #f7f8fa;
        display: flex;
        flex-direction: column;
        flex: 0 0 auto;
        margin-left: 20px;
        box-sizing: border-box;

        .search {
            height: 118px;
            width: 100%;
            background-color: var(--box-bg);
            border-radius: var(--border-radius);
            box-sizing: border-box;
            margin-bottom: 20px;
            flex: 0 0 auto;
        }

        .statistics {
            height: 100%;
            width: 100%;
            background-color: var(--box-bg);
            border-radius: var(--border-radius);
            box-sizing: border-box;
            margin-bottom: 20px;
        }

        .empty {
            height: 100%;
            width: 100%;
            background-color: var(--box-bg);
            border-radius: var(--border-radius);
            box-sizing: border-box;
        }
    }
}

.wrap {
    background-color: white;

    .usr-info {
        display: flex;
        align-items: center;
        padding: 50px 30px 38px;

        .usr-avatar {
            border: solid 4px #ffeb3b;
        }
        .usr-name {
            padding: 0 25px;
            font-size: 16px;
            font-weight: bolder;
        }
    }

    .option-li {
        :hover {
            background-color: #f7f8fa;
            cursor: pointer;
        }

        .option-li-item {
            margin: 0 60px;
            height: 54px;
            display: flex;
            align-items: center;

            .option-content {
                height: 30px;
                line-height: 35px;
                padding-left: 14px;
                font-size: 16px;
                font-weight: bolder;
            }

            .option-select {
                border-left: solid 6px #ffeb3b;
            }
        }
    }
}

.header {
    padding: 20px 20px;
    // box-sizing: border-box;
    flex-shrink: 0;
    // height: 150px;
    z-index: 5;
}
</style>